<!DOCTYPE html>
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>Form elements | Huraga Bootstrap Admin Template</title>
		<meta name="description" content="">
		<meta name="author" content="Walking Pixels | www.walkingpixels.com">
		<meta name="robots" content="index, follow">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- jQuery TagsInput Styles -->
		<link rel='stylesheet' type='text/css' href='css/plugins/jquery.tagsinput.css'>
		
		<!-- jQuery jWYSIWYG Styles -->
		<link rel='stylesheet' type='text/css' href='css/plugins/jquery.jwysiwyg.css'>
		
		<!-- Bootstrap wysihtml5 Styles -->
		<link rel='stylesheet' type='text/css' href='css/plugins/bootstrap-wysihtml5.css'>
		
		<!-- CSS styles -->
		<link rel='stylesheet' type='text/css' href='css/huraga-green.css'>
		
		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="img/icons/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="img/icons/apple-touch-icon-57-precomposed.png">
		
		<!-- JS Libs -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery.js"><\/script>')</script>
		<script src="js/libs/modernizr.js"></script>
		<script src="js/libs/selectivizr.js"></script>
		
		<script>
			$(document).ready(function(){
				
				// Tooltips
				$('[title]').tooltip({
					placement: 'top'
				});
				
				// Dropdowns
				$('.dropdown-toggle').dropdown();
				
				// Tabs
				$('.demoTabs a').click(function (e) {
					e.preventDefault();
					$(this).tab('show');
				})
				
			});
		</script>
	</head>
	<body>
		
		<!-- Main page header -->
		<header class="container">
		
			<!-- Main page logo -->
			<h1><a href="login.html" class="brand">Huraga</a></h1>
			
			<!-- Main page headline -->
			<p>A beautifully minimalistic admin template</p>
			
			<!-- Alternative navigation -->
			<nav>
				<ul>
					<li>
						<form class="nav-search">
							<input type="text" placeholder="Search&hellip;">
						</form>
					</li>
					<li>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Configuration
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="401.html"><span class="awe-flag"></span> Error page 401</a></li>
								<li><a href="403.html"><span class="awe-flag"></span> Error page 403</a></li>
								<li><a href="404.html"><span class="awe-flag"></span> Error page 404</a></li>
								<li><a href="500.html"><span class="awe-flag"></span> Error page 500</a></li>
								<li><a href="503.html"><span class="awe-flag"></span> Error page 503</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">Logout</a></li>
				</ul>
			</nav>
			<!-- /Alternative navigation -->
			
		</header>
		<!-- /Main page header -->
		
		<!-- Main page container -->
		<section class="container" role="main">
		
			<!-- Left (navigation) side -->
			<div class="navigation-block">
			
				<!-- User profile -->
				<section class="user-profile">
					<figure>
						<img alt="John Pixel avatar" src="http://placekitten.com/60/60">
						<figcaption>
							<strong><a href="#" class="">John Pixel</a></strong>
							<em>marketing manager</em>
							<ul>
								<li><a class="btn btn-primary btn-flat" href="#" title="Account settings">settings</a></li>
								<li><a class="btn btn-primary btn-flat" href="#" title="Message inbox">inbox</a></li>
							</ul>
						</figcaption>
					</figure>
				</section>
				<!-- /User profile -->
				
				<!-- Main navigation -->
				<nav class="main-navigation" role="navigation">
					<ul>
						<li><a href="index.html" class="no-submenu"><span class="awe-home"></span>Dashboard</a></li>
						<li class="current"><a href="forms.html" class="no-submenu"><span class="awe-tasks"></span>Forms <span class="badge">96</span></a></li>
						<li><a href="charts.html" class="no-submenu"><span class="awe-signal"></span>Charts</a></li>
						<li><a href="tables.html" class="no-submenu"><span class="awe-table"></span>Tables</a></li>
						<li>
							<a href="#"><span class="awe-picture"></span>Gallery</a>
							<ul>
								<li><a href="gallery.html">Car Gallery</a></li>
								<li><a href="gallery.html">Food Gallery</a></li>
								<li><a href="gallery.html">Art Gallery</a></li>
								<li><a href="gallery.html">Animal Gallery</a></li>
								<li><a href="gallery.html">Super long name to see how it collapse</a></li>
							</ul>
						</li>
						<li><a href="file-explorer.html" class="no-submenu"><span class="awe-file"></span>File explorer</a></li>
						<li><a href="calendar.html" class="no-submenu"><span class="awe-calendar"></span>Calendar</a></li>
						<li><a href="ui-buttons.html" class="no-submenu"><span class="awe-magic"></span>UI & Buttons</a></li>
						<li><a href="typo.html" class="no-submenu"><span class="awe-font"></span>Typography</a></li>
						<li><a href="grid.html" class="no-submenu"><span class="awe-th"></span>Grid <span class="badge">8</span></a></li>
						<li>
							<a href="#"><span class="awe-heart"></span>Goodies</a>
							<ul>
								<li><a href="goodies.html">Goodies</a></li>
								<li><a href="401.html">Error 401</a></li>
								<li><a href="403.html">Error 403</a></li>
								<li><a href="404.html">Error 404</a></li>
								<li><a href="500.html">Error 500</a></li>
								<li><a href="503.html">Error 503</a></li>
							</ul>
						</li>
					</ul>
				</nav>
				<!-- /Main navigation -->
				
				<!-- Sample side note -->
				<section class="side-note">
					<div class="side-note-container">
						<h2>Sample Side Note</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis erat dui, quis purus.</p>
					</div>
					<div class="side-note-bottom"></div>
				</section>
				<!-- /Sample side note -->
				
			</div>
			<!-- Left (navigation) side -->
			
			<!-- Right (content) side -->
			<div class="content-block" role="main">
			
				<!-- Page header -->
				<article class="page-header">
					<h1>Form elements</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit, dolor mollis adipiscing elementum, ipsum turpis euismod tellus, vitae mollis velit leo id nisi. Morbi non lectus turpis, eu interdum orci. In at rutrum nisi. Donec sit amet urna purus, at eleifend ipsum. Sed magna enim, tempor eu tincidunt vitae, dictum tristique arcu.</p>
				</article>
				<!-- /Page header -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Data block -->
					<article class="span12 data-block">
						<div class="data-container">
							<header>
								<h2>Forms</h2>
								<ul class="data-header-actions">
									<li class="demoTabs active"><a href="#basic" class="btn">Basic</a></li>
									<li class="demoTabs"><a href="#advanced" class="btn">Advanced</a></li>
								</ul>
							</header>
							<section class="tab-content">

								<!-- Tab #basic -->
								<div class="tab-pane active" id="basic">

									<!-- Example vertical forms -->
									<div class="row-fluid">
										<div class="span4">
											<h3>Vertical form</h3>
											<p>Lorem ipsum dolor sit amet, adipiscing elit. Phasellus vitae  ac ligula eleifend commodo id quis risus. Donec consequat lorem et metus vitae dapibus felis fermentum.</p>
											<p>Aenean imperdiet nibh vitae sem condimentum pharetra. Mauris molestie molestie faucibus. Aenean sit amet sem orci, at adipiscing dolor. Fusce feugiat odio vitae erat commodo sed accumsan ante sollicitudin. Integer mollis, tellus vel feugiat varius, risus quam lacinia erat, eu ultricies urna dolor ac metus.</p>
										</div>
										<div class="span8">
											<form>
												<fieldset>
													<div class="control-group">
														<label class="control-label" for="input">Text input</label>
														<div class="controls">
															<input id="input" class="input-xlarge" type="text">
															<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="optionsCheckbox">Checkbox</label>
														<div class="controls">
															<label class="checkbox">
																<input id="optionsCheckbox" type="checkbox" value="option1">
																Curabitur vehicula porttitor suscipit
															</label>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="select">Select list</label>
														<div class="controls">
															<select id="select">
																<option>Pick one</option>
																<option>1</option>
																<option>2</option>
																<option>3</option>
																<option>4</option>
																<option>5</option>
															</select>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="textarea">Textarea</label>
														<div class="controls">
															<textarea id="textarea" class="input-xlarge" rows="3"></textarea>
														</div>
													</div>
													<div class="form-actions">
														<button class="btn btn-alt btn-large btn-primary" type="submit">Save changes</button>
													</div>
												</fieldset>
											</form>
										</div>
									</div>

									<!-- Example horizontal forms -->
									<div class="row-fluid">
										<div class="span4">
											<h3>Horizontal form</h3>
											<p>Lorem ipsum dolor sit amet, adipiscing elit. Phasellus vitae  ac ligula eleifend commodo id quis risus. Donec consequat lorem et metus vitae dapibus felis fermentum.</p>
											<p>Aenean imperdiet nibh vitae sem condimentum pharetra. Mauris molestie molestie faucibus. Aenean sit amet sem orci, at adipiscing dolor. Fusce feugiat odio vitae erat commodo sed accumsan ante sollicitudin. Integer mollis, tellus vel feugiat varius, risus quam lacinia erat, eu ultricies urna dolor ac metus.</p>
										</div>
										<div class="span8">
											<form class="form-horizontal">
												<fieldset>
													<div class="control-group">
														<label class="control-label" for="input">Text input</label>
														<div class="controls">
															<input id="input" class="input-xlarge" type="text">
															<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="optionsCheckbox">Checkbox</label>
														<div class="controls">
															<label class="checkbox">
																<input id="optionsCheckbox" type="checkbox" value="option1">
																Curabitur vehicula porttitor suscipit
															</label>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="select">Select list</label>
														<div class="controls">
															<select id="select">
																<option>Pick one</option>
																<option>1</option>
																<option>2</option>
																<option>3</option>
																<option>4</option>
																<option>5</option>
															</select>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="textarea">Textarea</label>
														<div class="controls">
															<textarea id="textarea" class="input-xlarge" rows="3"></textarea>
														</div>
													</div>
													<div class="form-actions">
														<button class="btn btn-alt btn-large btn-primary" type="submit">Save changes</button>
													</div>
												</fieldset>
											</form>
										</div>
									</div>
									
								</div>
								<!-- /Tab #basic -->
								
								<!-- Tab #advanced -->
								<div class="tab-pane" id="advanced">
								
									<div class="row-fluid">
										
										<!-- Example search forms -->
										<div class="span6">
											<h3>Search form</h3>
											<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
											<form class="form-search">
												<div class="control-group">
													<div class="controls">
														<input class="search-query" type="text">
														<button class="btn" type="submit">Search</button>
													</div>
												</div>
											</form>
										</div>
										
										<!-- Example inline forms -->
										<div class="span6">
											<h3>Inline form</h3>
											<p>Add <code>.form-inline</code> for vertical alignment and spacing of form controls.</p>
											<form class="form-inline">
												<div class="control-group">
													<div class="controls">
														<input class="input-small" type="text" placeholder="Email">
														<input class="input-small" type="password" placeholder="Password">
														<label class="checkbox">
															<input type="checkbox">
															Remember me
														</label>
														<button class="btn" type="submit">Sign in</button>
													</div>
												</div>
											</form>
										</div>
										
									</div>
									<div class="row-fluid">
										
										<!-- Example alerts in form -->
										<div class="span4">
											<h2>Alerts in form</h2>
											<p>All alerts can be easily integrated into forms as form element getting nice and compact look. No magic here, just put your alert into form right before your first control group.</p>
										</div>
										<div class="span8">
											<form class="form-horizontal">
												<fieldset>
													<div class="alert alert-success">
														<button class="close" data-dismiss="alert" type="button">&times;</button>
														<strong>Well done!</strong> You successfully read this important alert message.
													</div>
													<div class="control-group">
														<label class="control-label" for="input4">Text input</label>
														<div class="controls">
															<input id="input4" type="text">
															<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
														</div>
													</div>
													<div class="form-actions">
														<button class="btn btn-alt btn-primary btn-large" type="submit">Save changes</button>
														<button class="btn btn-alt btn-large">Cancel</button>
													</div>
												</fieldset>
											</form>
											
											<form class="form-horizontal">
												<fieldset>
													<div class="alert alert-block">
														<button class="close" data-dismiss="alert" type="button">&times;</button>
														<strong>Warning!</strong>
														<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
													</div>
													<div class="control-group">
														<label class="control-label" for="input5">Text input</label>
														<div class="controls">
															<input id="input5" type="text">
															<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
														</div>
													</div>
													<div class="form-actions">
														<button class="btn btn-primary btn-large" type="submit">Save changes</button>
														<button class="btn btn-large">Cancel</button>
													</div>
												</fieldset>
											</form>
										</div>
										
									</div>
									<!-- /Grid row -->
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- jQuery jWYSIWYG -->
										<div class="span12">
											<h2>jQuery jWYSIWYG <small>Classic WYSIWYG editor</small></h2>
											<p>This jquery plugin is an inline content editor to allow editing rich HTML content on the fly. With a small file size less than 26Kb total and only 18Kb of code, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.</p>
											<form>
												<fieldset>
													<legend>Textarea with jWYSIWYG editor</legend>
													<div class="control-group">
														<div class="controls">
															<textarea id="textarea3" class="wysiwyg" rows="8"></textarea>
														</div>
													</div>
													<div class="form-actions">
														<button class="btn btn-primary btn-large" type="submit">Save</button>
													</div>
												</fieldset>
											</form>
										</div>
										
									</div>
									<!-- /Grid row -->
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Wysihtml5 -->
										<div class="span12">
											<h2>Wysihtml5 <small>Simple wysiwyg editors</small></h2>
											<p>Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of <a href="https://github.com/xing/wysihtml5" target="_blank">wysihtml5</a>.</p>
											<form>
												<fieldset>
													<legend>Textarea with wysihtml5 editor</legend>
													<div class="control-group">
														<div class="controls">
															<textarea id="textarea4" class="wysihtml5" placeholder="Enter text&hellip;" rows="8"></textarea>
														</div>
													</div>
													<div class="form-actions">
														<button class="btn btn-alt btn-primary btn-large" type="submit">Save</button>
													</div>
												</fieldset>
											</form>
										</div>
										
									</div>
									<!-- /Grid row -->
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Colorpicker -->
										<div class="span4">
											<h2>Color picker</h2>
											<p>Simple color picker for Bootstrap framework. Check out the <a href="http://www.eyecon.ro/bootstrap-colorpicker/" target="_blank">official page</a> for more options.</p>
											<form>
												<fieldset>
													<div class="control-group">
														<div class="controls">
															<div class="input-append" data-color="rgb(255, 146, 180)" data-color-format="rgb">
																<input type="text" class="colorpicker input-small" value=""><span class="add-on"><i class="colorpicker-preview" style="background-color: rgb(255, 146, 180)"></i></span>
															</div>
														</div>
													</div>
												</fieldset>
											</form>
										</div>
										
										<!-- Datepicker -->
										<div class="span4">
											<h2>Date picker</h2>
											<p>Simple date picker by the same author. Check out the <a href="http://www.eyecon.ro/bootstrap-datepicker/" target="_blank">official page</a> for more options and details.</p>
											<form>
												<fieldset>
													<div class="control-group">
														<div class="controls">
															<div class="input-append">
																<input class="datepicker input-small" value="08/06/2012" type="text"><span class="add-on"><i class="awe-calendar"></i></span>
															</div>
														</div>
													</div>
												</fieldset>
											</form>
										</div>
										
										<!-- jQuery TagsInput -->
										<div class="span4">
											<h2>jQuery TagsInput</h2>
											<p>This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link.</p>
											<form>
												<fieldset>
													<div class="control-group">
														<div class="controls">
															<input id="inputTag" class="tagsinput" type="text" value="foo,bar,baz">
														</div>
													</div>
												</fieldset>
											</form>
										</div>
										
									</div>
									<!-- /Grid row -->
									
								</div>
								<!-- /Tab #advanced -->
								
							</section>
							<footer class="info">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit, dolor mollis adipiscing elementum, ipsum turpis euismod tellus, vitae mollis velit leo id nisi.</p>
							</footer>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Example form styling -->
					<!-- Data block -->
					<article class="span6 data-block">
						<div class="data-container">
							<header>
								<h2>Styling</h2>
							</header>
							<section>
								<form class="form-inline">
									<fieldset>
										<div class="control-group">
											<label class="control-label" for="inputMask">Input mask</label>
											<div class="controls">
												<input type="text" data-mask="999-99-999-9999-9">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">Uneditable input</label>
											<div class="form-controls">
												<span class="span2 uneditable-input">Uneditable input is text masked as input</span>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="disabledInput">Disabled input</label>
											<div class="form-controls">
												<input id="disabledInput" class="span2 disabled" type="text" placeholder="Disabled input" disabled>
											</div>
										</div>
										<div class="control-group warning">
											<label class="control-label" for="inputWarning">Input with warning</label>
											<div class="form-controls">
												<input id="inputWarning" type="text" class="span2">
												<span class="help-block">This is warning message</span>
											</div>
										</div>
										<div class="control-group error">
											<label class="control-label" for="inputError">Input with error</label>
											<div class="form-controls">
												<input id="inputError" type="text" class="span2">
												<span class="help-block">This is error message</span>
											</div>
										</div>
										<div class="control-group success">
											<label class="control-label" for="inputSuccess">Input with success</label>
											<div class="form-controls">
												<input id="inputSuccess" type="text" class="span2">
												<span class="help-block">This is success message</span>
											</div>
										</div>
									</fieldset>
								</form>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
					<!-- Data block -->
					<article class="span6 data-block">
						<div class="data-container">
							<header>
								<h2>Styling</h2>
							</header>
							<section>
								<form class="form-inline">
									<fieldset>
										<div class="control-group">
											<label class="control-label" for="prependedInput">Prepended add-on</label>
											<div class="form-controls">
												<div class="input-prepend">
													<span class="add-on">password</span><input id="prependedInput" class="span2" type="password">
												</div>
												<p class="help-block">This is block input note</p>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="appendedInput">Appended add-on</label>
											<div class="form-controls">
												<div class="input-append">
													<input id="appendedInput" class="span2" type="text"><span class="add-on">&euro;</span>
												</div>
												<span class="note-inline">This is inline input note</span>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="appendedPrependedInput">Appended and prepended add-ons</label>
											<div class="form-controls">
												<div class="input-prepend input-append">
													<span class="add-on">192.</span><input id="appendedPrependedInput" class="span2" type="text"><span class="add-on">.255</span>
												</div>
											</div>
										</div>
										<div class="control-group">
											<div class="form-controls">
												<div class="input-prepend input-append">
													<span class="add-on">IPv4:</span><input id="appendedPrependedInput" class="span1" type="text"><span class="add-on">.168.</span><input id="appendedPrependedInput" class="span1" type="text"><span class="add-on">.255</span>
												</div>
											</div>
										</div>
										<div class="control-group">
											<div class="form-controls">
												<div class="input-append">
													<input id="appendedPrependedInput" class="span2" type="text"><button class="btn" type="button">Do it now!</button>
												</div>
											</div>
										</div>
										<div class="control-group">
											<div class="form-controls">
												<div class="input-prepend input-append">
													<span class="add-on">I want </span><input id="appendedPrependedInput" class="span1" type="text" placeholder="1 200"><button class="btn" type="button">&euro;</button><button class="btn" type="button">&pound;</button><button class="btn" type="button">$</button><span class="add-on">per month</span>
												</div>
											</div>
										</div>
									</fieldset>
								</form>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row">
				
					<!-- Example form sizing -->
					<!-- Data block -->
					<article class="span12 data-block decent">
						<div class="data-container">
							<header>
								<h2>File & Image input</h2>
							</header>
							<section>
								<form class="form-inline">
									<fieldset>
										<div class="control-group">
											<label class="control-label" for="fileInput">File input</label>
											<div class="controls">
												<div class="fileupload fileupload-new" data-provides="fileupload">
													<div class="input-append">
														<div class="uneditable-input"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
													</div>
												</div>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="fileInput">Image upload widgets</label>
											<p>When uploading an image, it's possible to show a thumbnail instead of the filename.</p>

											<div class="pull-right">
												<div class="fileupload fileupload-new" data-provides="fileupload">
													<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
													<div>
														<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
														<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
													</div>
												</div>

												<div class="fileupload fileupload-new" data-provides="fileupload" style="text-align: right">
													<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
													<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
													<div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
													<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
												</div>

											</div>

											<div class="fileupload fileupload-new" data-provides="fileupload">
												<input type="hidden" value="" name="">
												<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
													<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image">
												</div>
												<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
												<div>
													<span class="btn btn-file">
														<span class="fileupload-new">Select image</span>
														<span class="fileupload-exists">Change</span>
														<input type="file" name="">
													</span>
													<a class="btn fileupload-exists" data-dismiss="fileupload" href="#">Remove</a>
												</div>
											</div>

											<div class="fileupload fileupload-new" data-provides="fileupload">
												<div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
												<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
												<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
												<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
											</div>
										</div>
									</fieldset>
								</form>
							</section>
						</div>
					</article>
					<!-- /Data block -->
				
				</div>
				<!-- /Grid row -->

				<!-- Grid row -->
				<div class="row">
				
					<!-- Example form sizing -->
					<!-- Data block -->
					<article class="span12 data-block decent">
						<div class="data-container">
							<header>
								<h2>Sizing</h2>
							</header>
							<section>
								<form class="form-inline">
									<fieldset>
										<div class="control-group">
											<label class="control-label">Form elements sizing</label>
											<div class="form-controls demo">
												<input class="input-mini" type="text" placeholder=".input-mini">
												<input class="input-small" type="text" placeholder=".input-small">
												<input class="input-medium" type="text" placeholder=".input-medium">
												<input class="span1" type="text" placeholder=".span1">
												<input class="span2" type="text" placeholder=".span2">
												<input class="span3" type="text" placeholder=".span3">
												<input class="span4" type="text" placeholder=".span4">
												<input class="span5" type="text" placeholder=".span5">
												<select class="span1">
													<option>Google</option>
													<option>PayPal</option>
													<option>Microsoft</option>
													<option>Apple</option>
													<option>Yahoo</option>
												</select>
												<select class="span2">
													<option>Google</option>
													<option>PayPal</option>
													<option>Microsoft</option>
													<option>Apple</option>
													<option>Yahoo</option>
												</select>
												<select class="span3">
													<option>Google</option>
													<option>PayPal</option>
													<option>Microsoft</option>
													<option>Apple</option>
													<option>Yahoo</option>
												</select>
												<select class="span4">
													<option>Google</option>
													<option>PayPal</option>
													<option>Microsoft</option>
													<option>Apple</option>
													<option>Yahoo</option>
												</select>
												<select class="span5">
													<option>Google</option>
													<option>PayPal</option>
													<option>Microsoft</option>
													<option>Apple</option>
													<option>Yahoo</option>
												</select>
											</div>
										</div>
									</fieldset>
								</form>
							</section>
						</div>
					</article>
					<!-- /Data block -->
				
				</div>
				<!-- /Grid row -->
				
			</div>
			<!-- /Right (content) side -->
			
		</section>
		<!-- /Main page container -->
		
		<!-- Main page footer -->
		<footer class="container">
			<p>Built with love on <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> by <a href="http://www.walkingpixels.com">Walking Pixels</a>.</p>
			<ul>
				<li><a href="#" class="">Support</a></li>
				<li><a href="#" class="">Documentation</a></li>
				<li><a href="#" class="">API</a></li>
			</ul>
			<a href="#top" class="btn btn-primary btn-flat pull-right">Top &uarr;</a>
		</footer>
		<!-- /Main page footer -->
		
		<!-- Scripts -->
		<script src="js/navigation.js"></script>
		<script src="js/bootstrap/bootstrap-affix.js"></script>
		<script src="js/bootstrap/bootstrap-alert.js"></script>
		<script src="js/bootstrap/bootstrap-tooltip.js"></script>
		<script src="js/bootstrap/bootstrap-dropdown.js"></script>
		<script src="js/bootstrap/bootstrap-tab.js"></script>
		<script src="js/bootstrap/bootstrap-collapse.js"></script>
		<script src="js/bootstrap/bootstrap-fileupload.js"></script>
		<script src="js/bootstrap/bootstrap-inputmask.js"></script>

		<!-- jQuery TagsInput -->
		<script src="js/plugins/tagsInput/jquery.tagsinput.min.js"></script>
		
		<script>
			$(document).ready(function() {
			
				$('.tagsinput').tagsInput();
			
			});
		</script>
		
		<!-- jQuery jWYSIWYG -->
		<script src="js/plugins/jWYSIWYG/jquery.wysiwyg.js"></script>
		
		<script>
			$(document).ready(function() {
				
				$('.wysiwyg').wysiwyg({
					controls: {
						bold          : { visible : true },
						italic        : { visible : true },
						underline     : { visible : true },
						strikeThrough : { visible : true },
						
						justifyLeft   : { visible : true },
						justifyCenter : { visible : true },
						justifyRight  : { visible : true },
						justifyFull   : { visible : true },
			
						indent  : { visible : true },
						outdent : { visible : true },
			
						subscript   : { visible : true },
						superscript : { visible : true },
						
						undo : { visible : true },
						redo : { visible : true },
						
						insertOrderedList    : { visible : true },
						insertUnorderedList  : { visible : true },
						insertHorizontalRule : { visible : true },
						
						cut   : { visible : true },
						copy  : { visible : true },
						paste : { visible : true }
					},
					events: {
						click: function(event) {
							if ($("#click-inform:checked").length > 0) {
								event.preventDefault();
								alert("You have clicked jWysiwyg content!");
							}
						}
					}
				});
				
			});
		</script>
		
		<!-- Wysihtml5 -->
		<script src="js/plugins/wysihtml5/wysihtml5-0.3.0.js"></script>
		<script src="js/plugins/wysihtml5/bootstrap-wysihtml5.js"></script>
		
		<script>
			$(document).ready(function() {
				
				$('.wysihtml5').wysihtml5();
				
			});
		</script>
		
		<!-- Colorpicker -->
		<script src="js/plugins/colorpicker/bootstrap-colorpicker.js"></script>
		
		<script>
			$(document).ready(function() {
				
				var preview = $('.colorpicker-preview')[0].style;
				$('.colorpicker').colorpicker().on('changeColor', function(ev){
					preview.backgroundColor = ev.color.toHex();
				});
				
			});
		</script>
		
		<!-- Colorpicker -->
		<script src="js/plugins/datepicker/bootstrap-datepicker.js"></script>
		
		<script>
			$(document).ready(function() {
				
				$('.datepicker').datepicker();
				
			});
		</script>
		
	</body>
</html>
